<template>
  <div class="tupian">
    <van-tabs v-model="active">
      <div>
        <van-tab :title="item.title" v-for="item in list" :key="item.id">
          内容1
        </van-tab>
      </div>
      <div v-for="ite in lis" :key="ite.id">
        <img :src="ite.img_url" />
        <p>{{ ite.title }}</p>
        <p>{{ ite.zhaiyao }}</p>
      </div>
    </van-tabs>
  </div>
</template>

<script>
import { getimgcategory, getliebiaoshuj } from "@/apis/category";
export default {
  data() {
    return {
      active: 0,
      list: [],
      lis: [],
    };
  },
  async created() {
    const res = await getimgcategory();
    console.log(res);
    this.list = res.data.message;
    // this.list = this.list.unshift({ id: 0, title: "全部" });
    console.log(this.list);
    // this.getImagesFn();
    console.log(this.active);
    const re2 = await getliebiaoshuj(this.active);
    console.log(re2);
    this.lis = re2.data.message;
    console.log(this.active);
  },
  // methods: {
  //   async getImagesFn() {
  //     // 解构赋值，获取当前栏目的ID
  //     const { id } = this.list[this.active];
  //     console.log(id);
  //     const res2 = await getliebiaoshuj(this.list[this.active].id);
  //     console.log(res2);
  //     this.lis = res2.data.message;
  //     console.log(this.lis);
  //   },
  // },
};
</script>

<style lang="less" scoped>
.tupian {
  img {
    position: relative;
  }
}
</style>